<template>
    <div class="container">
        <div class="addAdmin">
            <el-button type="primary" @click="addAdmin">增加管理员</el-button>
        </div>
        <el-divider></el-divider>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="openid" label="openid" width="180"> </el-table-column>
            <el-table-column prop="username" label="用户名" width="180"> </el-table-column>
            <el-table-column prop="password" label="密码"> </el-table-column>
            <el-table-column prop="nickName" label="昵称" width="180"> </el-table-column>
            <el-table-column prop="role" label="角色" width="180"> </el-table-column>
            <el-table-column label="操作"> <template slot-scope="scope">
                    <el-button type="primary" @click="adminEdit(scope)">修改</el-button>
                    <el-popconfirm style="margin-left:10px" title="这是一段内容确定 删除吗？" @confirm="delAdmin(scope)">
                        <el-button type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize"
            layout="prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>

</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pagesize: 10,
            total: 0
        }
    },
    methods: {
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`); 
            this.page = val
            this.getAdminList()
        },
        getAdminList() {
            this.$http.get('/admGetAdmins', {
                params: { currentPage: this.currentPage, pagesize: this.pagesize }
            }).then(res => {
                //返回的数据在res.data中 
                console.log(res.data)
                if (res.data.status === 'success') {
                    this.total = res.data.total
                    this.tableData = res.data.result
                } else { this.$message.error('服务器错误') }
            }).catch(err => {
                console.log(err)
                this.$message.error('服务器错误')
            })
        },
        //修改 
        adminEdit(scope) {
            //console.log(scope) 
            const { row } = scope
            this.$router.push({
                name: 'AdminEdit',
                params: {
                    action: 'edit',
                    info: row
                }
            })
        },
        //删除 
        delAdmin(scope) {
            const { _id } = scope.row
            this.$http.get('/delAdmin', {
                params: { _id }
            }).then(res => {
                if (res.data === 'success') {
                    this.$message.success('删除成功')
                } else { this.$message.error('删除失败') }
            }).catch(error => { this.$message.error('删除失败') })
            this.getAdminList();
        },
        //添加管理员
        addAdmin() {
            this.$router.push({
                name: 'AdminEdit'
            })
        }
    },
    created() {
        this.getAdminList();
    },
}


</script>

<style lang="scss" scoped>
.container {
    background-color: #fff;
    padding: 10px;

    .addAdmin {
        text-align: right;
        margin: 10px;
    }
}
</style>